<template>
  <div class="app-container">
    <div style="background: #f7f8fa; padding: 20px">
      <el-form id="selectForm"
        :model="form"
        ref="form"
        v-show="showSearch"
        label-width="88px">

<div style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
            border: 1px solid #eee;
          ">
          <div style="display: flex">
            <div style="width: 25%">
              <div style="font-size: 16px;margin-bottom: 20px; "
                class="big_title_style">
                订单信息
              </div>
              <el-row>
                <el-col>
                  <el-form-item label="订单编号"
                    width="400px">
                    <span class="itemSpan">{{ form.orderNo }}</span>
                  </el-form-item>
                </el-col>

                <el-col>
                  <el-form-item label="订单类型"
                    width="400px">
                    <span class="itemSpan">{{ form.orderTypeName || form.orderType}}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="订单来源"
                    width="400px">
                    <span class="itemSpan">{{ form.platSourceName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div style="
                background: #fff;
                border-radius: 6x;
                margin-bottom: 15px;
                width: 25%;
              ">
              <div style="font-size: 16px;margin-bottom: 20px;"
                class="big_title_style">
                支付信息
              </div>
              <el-row> </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="支付金额"
                    width="400px">
                    <span class="itemSpan">{{ form.payAmountStr }}元</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="支付积分"
                    width="400px">
                    <span class="itemSpan">{{ form.payByScore }}积分</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="创建时间"
                    width="400px">
                    <span class="itemSpan">{{ form.createTime }}</span>
                  </el-form-item>
                </el-col>

              </el-row>
            </div>

            <div style="
                background: #fff;
                border-radius: 6px;
                margin-bottom: 15px;
                width: 25%;
              ">
              <div style="font-size: 16px;margin-bottom: 20px;"
                class="big_title_style">
                客户信息
              </div>
              <el-row>
                <el-col>
                  <el-form-item label="客户名称"
                    width="400px">
                    <span class="itemSpan">{{ form.customerName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="手机号码"
                    width="400px">
                    <span class="itemSpan">{{ form.phone }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="操作员"
                    width="400px">
                    <span class="itemSpan">{{ form.createName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </div>
        </div>

        <div v-if="form.itemList && form.itemList.length > 0"
          style="
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            margin-bottom: 15px;
            border: 1px solid #eee;
          ">
          <div>
            <div style="font-size: 16px;margin-bottom: 20px;"
              class="big_title_style">
              订单明细列表
            </div>
            <orderItem :itemList="form.itemList"></orderItem>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getInfo, addRemark } from "@/api/order/info";
import orderItem from "@/components/Order/orderItem";
import invoice from "@/components/Order/invoiceList";
import customerInvoice from "@/components/Order/customerInvoice";
import deliver from "@/components/Order/deliver";
import postSale from "@/components/Order/postSale";
import complaint from "@/components/Order/complaintList";

export default {
  name: "order",
  // props: ["info"],
  components: {
    orderItem,
    invoice,
    deliver,
    postSale,
    complaint,
    customerInvoice
  },
  data () {
    return {
      orderUid: "",
      remarks: null,
      dialogVisible: false,
      zIndex: 3000,
      showSearch: true,
      // 预览图片
      carouselImgs: [],
      detailImgs: [],
      // 表单参数
      form: {
        invoice: {},
        itemList: [],
        deliverList: [],
        postSaleList: [],
        complaintList: [],
      },
    };
  },
  props: {
    orderId: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  created () {
    if (!this.type) {
      this.orderUid = this.$route.params.orderUid;
      this.getInfoData();
    } else {
      this.orderUid = this.orderId
      this.getInfoData();
    }
  },
  methods: {
    getInfoData () {
      getInfo(this.orderUid).then((response) => {
        this.form = response.data;
        if (this.form.remark) {
          this.form.remark = this.form.remark.replace("[\"", "");
          this.form.remark = this.form.remark.replace("\"]", "");
          this.form.remark = this.form.remark.replace("\",\"", "");
          this.form.remark = this.form.remark.split(';')
        }
      });
    },
    addRemarks () {
      this.add = new Object
      this.add.orderUid = this.orderUid
      this.add.remark = JSON.parse(JSON.stringify(this.remarks));
      console.log(this.add);
      addRemark(this.add).then(response => {
        this.form.remark = response.data;
      });
      this.remarks = null;
      this.dialogVisible = false
    },
  },
};
</script>
sty
<style scoped>
#selectForm >>> .el-form-item__label {
  font-size: 14px;
  font-weight: 200;
}
#selectForm >>> .el-form-item {
  margin-bottom: 0px;
}
/* #step >>> .el-step__icon-inner {
  display: none;
} */

.itemSpan {
  font-size: 14px;
  color: #606266;
  font-weight: 100;
}
</style>
